<template>
  <div class="list-wiew">
    <scroll class="singer-box"
            :data="singers"
            ref="scroll"
            @changeScroll="changeScroll"
            :listenScroll="listenScroll"
            :probeType="probeType"
    >
      <div>
        <ul>
          <li class="item"
          v-for="(group, index) of singers"
          :key="index" ref="listGroup"
          >
            <h3 class="item-title">{{group.title}}</h3>
            <div class="item-list" v-for="item of group.items" :key="item.id" @click="singerSelect(item)">
              <div class="list-left">
                <img v-lazy="item.avatar" alt="">
              </div>
              <div class="list-right">
                <p>{{item.name}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </scroll>
    <div class="alphabet " @touchstart="handleTouchStart" @touchmove.stop.prevent="handleTouchMove">
      <ul>
        <li class="alphabet-item" v-for="(alphabet,index) of handleAlphabet" :key="alphabet" :data-index="index"
        :class="{'current':currentIndex === index}"
        >{{alphabet}}
        </li>
      </ul>
    </div>
    <div class="fixed" v-show="fixedTitle" ref="fixed">{{fixedTitle}}</div>
  </div>
</template>
<script>
import Scroll from 'base/scroll/scroll'
import {getDataAttr} from 'common/js/dom'
const ARCHOR_HEIGHT = 44
const FIXTOP_HEIGHT = 56
export default {
  name: 'ListView',
  props: {
    singers: {
      type: Array
    }
  },
  data () {
    return {
      probeType: 3,
      listenScroll: true,
      currentIndex: 0,
      scrollY: -1,
      diffeY: 0
    }
  },
  created () {
    this.touchOffset = {}
    this.listHeight = []
  },
  updated () {
    this._calculateHeight()
  },
  computed: {
    handleAlphabet () {
      return this.singers.map((item) => {
        return item.title.substr(0, 1)
      })
    },
    fixedTitle () {
      if (this.scrollY > 0 || !this.singers[this.currentIndex]) return
      return this.singers[this.currentIndex].title ? this.singers[this.currentIndex].title : ''
    }
  },
  methods: {
    refresh () {
      this.$refs.scroll.refresh()
    },
    singerSelect (item) {
      this.$emit('singerDetailSelected', item)
    },
    handleTouchStart (e) {
      let el = e.target
      let anchorIndex = getDataAttr(el, 'index')
      this._scrollTo(anchorIndex)
      this.touchOffset['startY'] = e.targetTouches[0].pageY
      this.anchorIndex = parseInt(anchorIndex)
    },
    handleTouchMove (e) {
      this.touchOffset['endY'] = e.targetTouches[0].pageY
      let diffeY = this.touchOffset.endY - this.touchOffset.startY
      let diffeIndex = Math.floor(diffeY / ARCHOR_HEIGHT)
      this._scrollTo(this.anchorIndex + diffeIndex)
    },
    changeScroll (pos) {
      this.scrollY = pos.y
    },
    _calculateHeight () {
      this.listHeight = []
      let height = 0
      this.listHeight.push(height)
      let list = this.$refs.listGroup
      for (let i = 0; i < list.length; i++) {
        let itemHeight = list[i].clientHeight
        height += itemHeight
        this.listHeight.push(height)
      }
    },
    _scrollTo (index) {
      this.$refs.scroll.scrollToElement(this.$refs.listGroup[index])
    }
  },
  watch: {
    singers () {
      setTimeout(() => {
        this._calculateHeight()
      }, 20)
    },
    scrollY (newY) {
      let listHeight = this.listHeight

      if (newY >= 0) {
        this.currentIndex = 0
        return
      }
      for (let i = 0; i < listHeight.length - 1; i++) {
        let height1 = listHeight[i]
        let height2 = listHeight[i + 1]
        if (-newY >= height1 && -newY < height2) {
          this.currentIndex = i
          this.diffeY = height2 + newY
          // console.log(this.diffeY)
          return
        }
      }
      this.currentIndex = listHeight.length - 1
    },
    diffeY (newVal) {
      let fixTop = (newVal > 0 && newVal < FIXTOP_HEIGHT) ? newVal - FIXTOP_HEIGHT : 0
      if (this.fixTop === fixTop) return
      this.fixTop = fixTop

      this.$refs.fixed.style.transform = `translate3d(0,${fixTop}px,0)`
    }
  },
  components: {
    Scroll
  }
}
</script>
<style lang="scss" scoped>
@import 'common/scss/variable.scss';
.list-wiew{
  position: absolute;
  right: 0;
  left: 0;
  top: 2.2rem;
  bottom: 0;
  overflow: hidden;
  .singer-box {
    width: 100%;
    height: 100%;
    ul {
      .item {
        padding-bottom: 0.52rem;
        &:last-of-type{
          padding-bottom: 0;
        }
        .item-title{
          width: 100%;
          font-size: $font-size-medium-x;
          color: $color-text-ll;
          background: $color-highlight-background;
          line-height: 0.44rem;
          padding: 0.06rem 0.44rem;
        }
        .item-list{
          display: flex;
          justify-content: flex-start;
          margin-top: 0.5rem;
          padding: 0 .32rem;
          .list-left{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            overflow: hidden;
            img{
              width: 100%;
            }
          }
          .list-right{
            color: $color-text-ll;
            p{
              margin-left: 0.44rem;
              line-height: 1rem;
              font-size: $font-size-medium-x;
            }
          }
        }
      }
    }
  }
  .alphabet{
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0.22rem;
    width: 0.44rem;
    background: $color-background-d;
    border-radius: 0.22rem;
    padding: 0.32rem 0;
    z-index: 99;
    ul{
      .alphabet-item{
        width: 100%;
        line-height: 0.44rem;
        color: $color-text-d;
        font-size: $font-size-medium-x;
        text-align: center;
        &.current{
          color: $color-theme;
        }
      }
    }
  }
  .fixed{
    width: 100%;
    font-size: $font-size-medium-x;
    color: $color-text-ll;
    background: $color-highlight-background;
    line-height: 0.44rem;
    padding: 0.06rem 0.44rem;
    position: absolute;
    left: 0;
    top: 0;
  }
}

</style>
